<template>
  <div>
    <!-- 查询区 -->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item class="smart-query-form-item">
          <a-select v-model:value="searchParam.accountId" style="width: 160px" placeholder="选择账户">
            <a-select-option v-for="item in accountOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-date-picker v-model:value="searchParam.startDate" style="width: 120px" placeholder="开始日期" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-date-picker v-model:value="searchParam.endDate" style="width: 120px" placeholder="结束日期" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-input v-model:value="searchParam.keyword" style="width: 180px" placeholder="摘要/户名/科目" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="search">
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>

    <!-- 操作按钮区 -->
    <a-row class="smart-table-btn-block" style="margin-bottom: 8px;">
      <div class="smart-table-operate-block">
        <a-button type="primary" size="small" @click="showImportModal"><template #icon><ImportOutlined /></template>导入</a-button>
        <a-button type="primary" size="small" style="margin-left: 8px;" @click="showVoucherFormModal"><template #icon><PlusOutlined /></template>新增</a-button>
        <a-button size="small" style="margin-left: 8px;" @click="showVoucherSettingModal">生成凭证</a-button>
      <a-button @click="confirmBatchDelete"  size="small" :disabled="selectedRowKeys.length == 0">
                    批量修改
                </a-button>
        <a-button size="small" style="margin-left: 8px;">更多</a-button>
      </div>
    </a-row>

    <!-- 主表格区 -->
    <a-table
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
      size="small"
      bordered
      rowKey="id"
      :scroll="{ x: 1200 }"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template #bodyCell="{ column, record, text, index }">
        <template v-if="column.dataIndex === 'voucherNo' && record.voucherNo">
          <a :href="`#`" style="color: #1890ff">{{ record.voucherNo }}</a>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>更多</a>
            <template #overlay>
              <a-menu>
                <a-menu-item>详情</a-menu-item>
                <a-menu-item>编辑</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </a-table>

    <!-- 底部统计区 -->
    <div style="margin-top: 12px; background: #fafafa; padding: 8px 16px; border: 1px solid #f0f0f0;">
      <span>期初账户余额：{{ summary.beginBalance }}</span>
      <span style="margin-left: 32px;">收入合计(本期)：{{ summary.incomeTotal }}</span>
      <span style="margin-left: 32px;">支出合计(本期)：{{ summary.expenseTotal }}</span>
      <span style="margin-left: 32px;">期末账户余额：{{ summary.endBalance }}</span>
    </div>

    <!-- 分页 -->
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="pageable.pageSize"
        v-model:current="pageable.pageNum"
        v-model:pageSize="pageable.pageSize"
        :total="pageable.total"
        @change="handleSizeChange"
        :show-total="(total) => `共${total}条`"
      />
    </div>
    <BankImportModal ref="bankImportModalRef" />
    <BankVoucherFormModal ref="bankVoucherFormModalRef" />
    <VoucherSettingModal ref="voucherSettingModalRef" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Modal } from 'ant-design-vue';
import { SearchOutlined, ImportOutlined, PlusOutlined } from '@ant-design/icons-vue';
import BankImportModal from './components/bankimport-modal.vue';
import BankVoucherFormModal from './components/bankvoucher-form-modal.vue';
import VoucherSettingModal from './components/voucher-setting-modal.vue';

const PAGE_SIZE_OPTIONS = ['20', '50', '100'];
const pageable = reactive({ pageNum: 1, pageSize: 20, total: 4 });

const searchParam = reactive({
  accountId: '',
  startDate: '',
  endDate: '',
  keyword: '',
});

const accountOptions = [
  { value: '7057', label: '交道银行7057' },
  { value: '1001', label: '工商银行' },
];

const columns = [
  { title: '交易日期', dataIndex: 'tradeDate', width: 110 },
  { title: '流水号', dataIndex: 'serialNo', width: 100 },
  { title: '凭证号', dataIndex: 'voucherNo', width: 100 },
  { title: '摘要', dataIndex: 'summary', width: 120 },
  { title: '方向', dataIndex: 'direction', width: 60 },
  { title: '收支金额', dataIndex: 'amount', width: 100 },
  { title: '对方会计科目', dataIndex: 'oppositeSubject', width: 120 },
  { title: '辅助项目', dataIndex: 'assistItem', width: 100 },
  { title: '对方户名', dataIndex: 'oppositeAccount', width: 120 },
  { title: '收入金额', dataIndex: 'income', width: 100 },
  { title: '操作', dataIndex: 'action', fixed: 'right', width: 80 },
];

const tableData = ref([
  {
    id: 1,
    tradeDate: '2025-05-31',
    serialNo: '00001',
    voucherNo: '00001',
    summary: '服务费',
    direction: '收入',
    amount: '100.00',
    oppositeSubject: '101002 服务收入',
    assistItem: '1122 应收账款',
    oppositeAccount: '00003 张山…',
    income: '100.00',
  },
  {
    id: 2,
    tradeDate: '2025-05',
    serialNo: '',
    voucherNo: '',
    summary: '本月合计',
    direction: '',
    amount: '',
    oppositeSubject: '',
    assistItem: '',
    oppositeAccount: '',
    income: '1',
  },
  {
    id: 3,
    tradeDate: '2025-05',
    serialNo: '',
    voucherNo: '',
    summary: '本年累计',
    direction: '',
    amount: '',
    oppositeSubject: '',
    assistItem: '',
    oppositeAccount: '',
    income: '1',
  },
]);

const summary = reactive({
  beginBalance: '3,132.93',
  incomeTotal: '100.00',
  expenseTotal: '0.00',
  endBalance: '3,232.93',
});

const selectedRowKeys = ref([]);
const selectedRows = ref([]);

function onSelectChange(keys, rows) {
  selectedRowKeys.value = keys;
  selectedRows.value = rows;
}

function confirmBatchDelete() {
  Modal.confirm({
    title: '批量修改',
    content: `确认要批量修改选中的 ${selectedRowKeys.value.length} 条记录吗？`,
    onOk: () => {
      // TODO: 批量修改逻辑
      console.log('批量修改', selectedRowKeys.value, selectedRows.value);
    },
  });
}

function search() {
  // TODO: 查询逻辑
}
function handleSizeChange() {
  // TODO: 分页逻辑
}

const bankImportModalRef = ref();
function showImportModal() {
  bankImportModalRef.value.showModal();
}

const bankVoucherFormModalRef = ref();
function showVoucherFormModal() {
  bankVoucherFormModalRef.value.showModal();
}

const voucherSettingModalRef = ref();
function showVoucherSettingModal() {
  voucherSettingModalRef.value.showModal();
}
</script>

<style scoped>
.smart-query-form-row {
  margin-bottom: 8px;
}
.smart-table-btn-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smart-table-operate-block > * {
  margin-right: 8px;
}
.smart-query-table-page {
  margin-top: 12px;
  text-align: right;
}
</style>
